<template>
	<div class="contentcolle"  v-if='collect'>
	  <div class="screen" @click.stop="selfhide()"></div>
	
		<div class="colllist">
			<div class="tit">
				<span class="mui-icon mui-icon-loop"></span>
				<span>我的收藏夹</span>
				<span @click="clearlocal()">清楚</span>
			</div>


			<scroll ref="collect" :data="collect" class="collectscroll">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" v-for="(todo,index) in collect" @click.stop="playcoll(0,todo.title)">
						<span>{{todo.title}}<br>{{todo.singer}}</span>
						<span class="mui-icon mui-icon-closeempty right" @click="removethis(todo)"></span>
					</li>

				</ul>
			</scroll>

		</div>
	
	</div>
</template>

<script>

	import { mapGetters } from 'vuex'
	import Scroll from './scroll'
	export default {
		computed: mapGetters([
			"collect",
			'searchlist',
			'isshowcollect'

		]),
		watch: {
			isshowcollect() {
				this.$refs.collect.refresh();

			}
		},
		methods: {
			playcoll(index, content) {

				var _this = this

				this.$http.get('/search' + "?keywords=" + content).then((res) => {
					//_this.searchlist = res.data.result.albums;

					let datas = res.data.result
					_this.$store.dispatch('searchlist', datas)
					let thissong = this.searchlist.songs[index]
					_this.$store.dispatch('dataurl', thissong)
					_this.$store.dispatch('isplaying')
				})

			},
			selfhide() {
				this.$store.dispatch('isshowcollect')
			},
			removethis(todo) {
				this.$store.dispatch('removethis', todo)
			},
			clearlocal() {
				let that = this
				let btn = ['确定', '取消']
				mui.confirm('确定清空所有内容', ' ', btn, function(e) {
					if(e.index == 0) {
						that.$store.dispatch('clear');
						mui.toast('已清空')
						that.$store.dispatch('isshowcollect')
					} else {
						mui.toast('算了')
					}
				})

			}
		},
		components: {
			Scroll
		}
	}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	.contentcolle {
		position: absolute;
		width: 100%;
		height: 100vh;
		top: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.5);
		.screen{
			width: 100%;
			position: fixed;
			height: 100%;
			
		}
		.colllist {
			position: absolute;
			border: 1px #FAFAFA solid;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			background: rgba(0, 0, 0, 0.8);
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			color: #fff;
			.tit {
				padding: 5px 10px;
				font-size: 12px;
				width: 100%;
				display: flex;
				justify-content: space-between;
			}
			.collectscroll {
				height: 40vh;
				overflow: hidden;
				ul {
					background: none;
					.mui-table-view-cell {
						border-bottom: 1px solid #fff;
						display:flex;
						flex-direction: row ;
						 justify-content: space-between ;
						span{
							font-size: 14px;	
						}
						&:after{
							background: none;
						}
						.right {
							font-size: 24px;
							padding-top: 1vh;
						}
					}
				}
			}
		}
	}
</style>